
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>树形表格</title>
  <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body class="pear-container">

<div class="layui-card">
  <div class="layui-card-body">
    <table id="power-table" lay-filter="power-table"></table>
  </div>
</div>

<script type="text/html" id="power-toolbar">
  <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
    <i class="layui-icon layui-icon-add-1"></i>
    新增
  </button>
  <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
    <i class="layui-icon layui-icon-spread-left"></i>
    展开
  </button>
  <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
    <i class="layui-icon layui-icon-shrink-right"></i>
    折叠
  </button>
  <button class="pear-btn pear-btn-success pear-btn-md" lay-event="reload">
    <i class="layui-icon layui-icon-refresh"></i>
    重载
  </button>
</script>

<script type="text/html" id="power-bar">
  <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
  <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="power-enable">
  <input type="checkbox" name="enable" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>

<script>

  function initTable() {
    window.location.reload();
  }

  layui.use(['table','form','jquery','treetable'],function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let treetable = layui.treetable;

    let MODULE_PATH = "{$Request.root}/admin.cate/";

    treetable.render({
      treeColIndex: 1,
      treeSpid: 0,
      treeIdName: 'cate_id',
      treePidName: 'parent_id',
      skin:'line',
      treeDefaultClose: true,
      toolbar:'#power-toolbar',
      elem: '#power-table',
      url: MODULE_PATH + 'index',
      page: false,
      cols: [
        [
          {field: 'cate_id', minWidth: 200, title: 'ID'},
          {field: 'name', title: '名称'},
          {field: 'status', title: '状态',templet:'#power-enable'},
          {title: '操作',templet: '#power-bar', width: 150, align: 'center'}
        ]
      ]
    });

    table.on('tool(power-table)',function(obj){
      if (obj.event === 'remove') {
        window.remove(obj);
      } else if (obj.event === 'edit') {
        window.edit(obj);
      }
    })

    table.on('toolbar(power-table)', function(obj){
      if(obj.event === 'add'){
        window.add();
      } else if(obj.event === 'refresh'){
        window.refresh();
      }  else if(obj.event === 'expandAll'){
        treetable.expandAll("#power-table");
      } else if(obj.event === 'foldAll'){
        treetable.foldAll("#power-table");
      } else if(obj.event === 'reload'){
        treetable.reload("#power-table");
      }
    });

    form.on('submit(power-query)', function(data) {
      var keyword = data.field.keyword;
      treetable.search('#power-table',keyword);
      return false;
    });

    window.add = function(){
      layer.open({
        type: 2,
        title: '新增',
        shade: 0.1,
        area: ['450px', '500px'],
        content: MODULE_PATH + 'add.html'
      });
    }

    window.edit = function(obj){
      layer.open({
        type: 2,
        title: '修改',
        shade: 0.1,
        area: ['450px', '500px'],
        content: MODULE_PATH + 'edit?id=' + obj.data['cate_id']
      });
    }

    window.remove = function(obj){
      layer.confirm('确定要删除该栏目', {icon: 3, title:'提示'}, function(index){
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: MODULE_PATH+"del?id="+obj.data['cate_id'],
          dataType:'json',
          type:'delete',
          success:function(result){
            layer.close(loading);
            if(result.code == 0){
              layer.msg(result.msg,{icon:1,time:1000},function(){
                obj.del();
              });
            }else{
              layer.msg(result.msg,{icon:2,time:1000});
            }
          }
        })
      });
    }
  })
</script>
</body>
</html>